<template>
  <div>
    <el-container style="height: 100vh">
      <el-aside class="aside" :style="{width:`${isCollapse?65:240}px`, transition: '0.4s'}">
        <el-menu 
          router
          :default-active="$route.path"
          background-color="#345"
          text-color="#bbb"
          :style="{height: '100vh'}"
          :collapse="isCollapse"
          class="el-menu-vertical-demo">
          <el-menu-item>
            
            <template slot="title">
              
              <span style="font-size: 1.2em; color:#efefef; font-weight: bold;"><img src="@/assets/logo.png" style="width: 20%;" alt=""/>&nbsp;可可西里后台管理</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/htlogin/index">
            <i class="el-icon-house"></i>
            <template slot="title">
              首页
            </template>
          </el-menu-item>
          <!-- 景区管理 -->
          <el-submenu index="jq">
            <template slot="title">
              <i class="el-icon-sunny"></i>
              <span slot="title">景区管理</span>
            </template>
            <el-menu-item index="/htlogin/jqlist">
              <i class="el-icon-notebook-2"></i>
              <span slot="title">景区列表</span>
            </el-menu-item>
            <el-menu-item index="/htlogin/jqadd">
              <i class="el-icon-plus"></i>
              <span slot="title">新增景区</span>
            </el-menu-item>
          </el-submenu>
          <!-- 用户管理 -->
          <el-submenu index="user">
            <template slot="title">
              <i class="el-icon-user"></i>
              <span slot="title">用户管理</span>
            </template>
            <el-menu-item index="/htlogin/userlist">
              <i class="el-icon-notebook-2"></i>
              <span slot="title">用户列表</span>
            </el-menu-item>
            <el-menu-item index="/htlogin/user-add">
              <i class="el-icon-plus"></i>
              <span slot="title">新增用户</span>
            </el-menu-item>
            <el-menu-item index="/htlogin/sqblist">
              <i class="el-icon-message"></i>
              <span slot="title">申请信息</span>
            </el-menu-item>
          </el-submenu>
          <!-- 旅程管理 -->
          <el-submenu index="tl">
            <template slot="title">
              <i class="el-icon-guide"></i>
              <span slot="title">旅程管理</span>
            </template>
            <el-menu-item index="/htlogin/tllist">
              <i class="el-icon-notebook-2"></i>
              <span slot="title">条例列表</span>
            </el-menu-item>
            <el-menu-item index="/htlogin/tladd">
              <i class="el-icon-plus"></i>
              <span slot="title">新增条例</span>
            </el-menu-item>
          </el-submenu>
          <!-- 题库管理 -->
          <el-submenu index="tk">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span slot="title">题库管理</span>
            </template>
            <el-menu-item index="/htlogin/tklist">
              <i class="el-icon-notebook-2"></i>
              <span slot="title">题库列表</span>
            </el-menu-item>
            <el-menu-item index="/htlogin/tkadd">
              <i class="el-icon-plus"></i>
              <span slot="title">新增题目</span>
            </el-menu-item>
          </el-submenu>

        </el-menu>
      </el-aside>

      <el-container>
        <el-header class="header">
          <i v-show="!isCollapse" class="el-icon-s-fold" @click="isCollapse=true"></i>
          <i v-show="isCollapse" class="el-icon-s-unfold" @click="isCollapse=false"></i>

          <el-breadcrumb>
            <el-avatar style="margin:0px 10px -15px 0px" icon="el-icon-user-solid"></el-avatar>
            <span style="line-height: 60px">未登录</span>
          </el-breadcrumb>

          
        </el-header>

        <el-main>
          <!-- 站位符,嵌套路由 -->
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  data() {
    return {
      isCollapse: false
    }
  },
  computed:{
    //下述写法与user 计算属性原理一致
    ...mapState(['user'])
    // user(){ //该计算属性直接返回state对象中的user对象
    //   return this.$store.state.user
    // }
  }
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;

  i {
    font-size: 1.3em;
  }
}
.aside::-webkit-scrollbar {
  display: none;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 240px;
    min-height: 400px;
  }
</style>